<template>
    <div class="nlbox">
        <div class="top">
            <h4>线下权益兑换</h4>
            <p>请选择要兑换的奖励</p>
        </div>
        <div class="ltlist">
            <div class="item" v-for="dt in list" :key="dt.exchangeItemId">
                <button @click="getQR(dt)">{{dt.exchangeName}}</button>
                <p>{{dt.energyAmount}}g</p>
            </div>
            
        </div>
    </div>
    <my-dailog v-model:show="showFlag" width="100%" className="dg2" @close="gggg" :showClose="true">
        <div class="dgbox">
            <p>请将二维码出示给线下工作人员</p>
            <p>完成扣除{{selectItem.energyAmount}}g绿色能量兑换{{selectItem.exchangeName}}{{selectItem.exchangeItemId==1?'*1':''}}</p>
            <div class="ewm">
                <img :src="imgUrl" alt="">
            </div>
        </div>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myDailog from '@/components/myDailog.vue'
import {toast,confirm} from '@/utils/common'
export default {
    props:{

    },
    components:{
        myDailog
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            appToken:'',
            showFlag:false,
            list:[],
            selectItem:'',
            qrCodeToken:'',
            imgUrl:''
        })

        onMounted(()=>{
            state.appToken = route.query.token
            if(!state.appToken){
                confirm('提示信息','游戏账号没有登录')
            }else{
                getExchangeItemList()
               // getMyGreenEnergy()
            }
            
        })

        const getMyGreenEnergy = async()=>{
            const res = await store.dispatch('user/getMyGreenEnergy',{
                token:state.appToken,
                "energyAmount": 30,
                "actionName":"绿色骑行区",
                "actionType":2,
                "energyType":2
            })
            if(res.code!=200) return toast(res.message)
           
        }

        const getExchangeItemList = async ()=>{
            const res = await store.dispatch('user/getExchangeItemList',{
                token:state.appToken,
                page:1,
                size:20
            })
            if(res.status==401){
                return confirm('提示信息','登录认证失效')
            }else if(res.code!=200){
                return toast(res.message)
            }
            state.list = res.data
        }

        const getQR = async(item)=>{
            state.selectItem = item
            // 创建二维码token
            const res = await store.dispatch('user/createQrCodeToken',{
                token:state.appToken,
                energyAmount: item.energyAmount,
                exchangeItemId: item.exchangeItemId,
                exchangeName: item.exchangeName
            })
            if(res.code!=200) return toast(res.message)
            state.qrCodeToken = res.data.qrCodeToken
            getQrCode()
            
        }

        const getQrCode = async()=>{
            // 获取二维码
            const res = await store.dispatch('user/getQrCode',{
                token:state.appToken,
                code:state.qrCodeToken
            })
            if(res){
                let blob = new Blob([res],{type:'image/jpeg'})
                state.imgUrl = window.URL.createObjectURL(blob);
                state.showFlag = true
            }else{
                toast('获取二维码失败')
            }
        }

        const gggg = ()=>{
            console.log('关闭了')
        }

        return{
            ...toRefs(state),
            getQR,
            gggg
        }
    }
}
</script>

<style lang="scss" scoped>
    .nlbox{
        //position: fixed;
        //left: 0;
        //top: 0;
        //width: 100%;
        //height: 100%;
        //background: #fff;
        padding: 20px;
        .top{
            color: #333;
            text-align: center;
            line-height: 40px;
            h4{
                color: #fff;
                padding: 0 0 30px 0;
            }
            p{
                color: #fff;
                padding: 0 0 15px 0;
            }
        }
        .ltlist{
            display: flex;
            
            .item{
                flex: 1;
                color: #333;
                &+.item{
                    button{
                        border-left: 1px solid #dbd9d9;
                    } 
                }
                button{
                    display: block;
                    color: var(--listBgColor);
                    width: 100%;
                    height: 200px;
                    border: 0;
                    background: #eee;
                    box-shadow: 0 0 0.13333rem #bdbbbb;
                    &:hover{
                        background: #dad8d8;
                    }
                    &:disabled{
                        color: #aaa9a9;
                        background: #f1f0f0;
                    }
                }
                p{
                    text-align: center;
                    padding: 10px 0;
                    margin: 0;
                    font-size: 28px;
                    color: #fff;
                }
            }
        }
    }
    .dgbox{
        line-height: normal;
        p{
            font-size: 28px;
            text-align: center;
            padding: 10px 0;
        }
        .ewm{
            padding: 10px 0 20px;
            img{
              display: block;
              width: 400px;
              margin: 0 auto;  
            }
        }
    }
</style>